// src\components\Footer\index.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'
export default class Footer extends Component {
  static propTypes={
    todos:PropTypes.array.isRequired
  }
  // 全选
  handleCheckAll=(event)=>{
    // console.log("Footer--handleCheckAll----",event.target.checked);
      this.props.checkAll(event.target.checked);
  }
  // 清除已经完成的任务
  handleClearDonedTodo=()=>{
    // console.log("Footer--handleClearDonedTodo");
    this.props.deleteDonedTodo();
  }
  render() {
    const {todos}=this.props;
    // 已完成的功能
    const doneCount=todos.reduce((pre,cur)=>pre+(cur.done?1:0),0);
    // 总数
    const count=todos.length;
    return (
      <div className='todo-footer'>
        <label>
            <input type='checkbox' onChange={this.handleCheckAll} checked={doneCount===count&&count!==0?true:false}></input>
        </label>
        <span>
            <span>已完成{doneCount}</span>/ 全部{count}
        </span>
        <button className='btn btn-danger' onClick={this.handleClearDonedTodo}>清除已完成的任务</button>
      </div>
    )
  }
}
